<template>
	<view class="w94">
		<!-- 数据列表 -->
		<view class="addSite">
			<u-search placeholder="请输入车辆类型" v-model="keyword" @search="search" :showAction="false"
				@custom="search"></u-search>
			<u-button shape="circle" type="primary" text="添加车辆"  @tap="toAddCar"></u-button>
		</view>
		<scroll-view scroll-y style="height: 85vh;" @scrolltolower="loadMore">
			<view class="item" :class="index%2==0?'bg':''" v-for="(item, index) in carList" :key="item.id">
				<view class="top">
					<view class="name">{{ item.carPlate  }}</view>
					<view class="phone">{{ item.vtype  }}</view>
					<view class="tag" v-if="item.isDef==1">
						<text class="red">默认</text>
					</view>
					<view class="icon">
						<u-icon class="mr10" name="edit-pen" :size="21" :color="index%2==0?'#fff':'#999999'"
							@click="edit(item)"></u-icon>
						<u-icon class="ml5" name="trash" :size="21" :color="index%2==0?'#fff':'#999999'"
							@click="del(item,index)"></u-icon>
					</view>

				</view>
				<text class="center">行驶证号码：{{item.license }}</text>
				<text class="center">发动机号码：{{item.engineNo}}</text>
				<text class="center">车辆识别代号：{{item.idNumber}}</text>
				<view class="bottom">
					<text>可购油量：{{item.maxNum }}</text>
					<text>可购油型：{{item.oilType }}</text>
				</view>
				<view class="bottom">
					<text>注册日期：{{item.regCheDate }}</text>
					<text>发证日期：{{item.licenseDate}}</text>
				</view>
			</view>
			<!-- 加载状态 -->
			<u-loadmore :status="loadingState" icon-type="circle" />
		</scroll-view>

		<!-- 分页控件 -->
		<u-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button" @change="pageChange" />
	</view>
</template>

<script lang="ts" setup>
	import API from "@/api/index.js"
	import { ref, reactive, computed } from "vue"
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { route } from "@/uni_modules/uview-plus";
	let carList = reactive([])
	const isSelect = ref(0);
	// const addressId = ref(null)
	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loading = ref(false)
	let loadingState = ref('loadmore')
	const keyword = ref('')

	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})
	onLoad((options) => {
		const { select } = options
		if (select) {
			isSelect.value = select
			uni.setNavigationBarTitle({
				title: '选择车辆'
			})
		}
		getData(1);
	})
	onShow(() => {
		// 监听地址选择页面事件
		uni.$on('isEdit', (res) => {
			console.log('isEdit', res);
			if(res){
				getData(1)
			}
			uni.$off('isEdit')
		})
	})
	let condition = reactive([{
		"filedIndex": "user",
		"filedValue": uni.getStorageSync('userInfo').id
	}])
	// 获取列表数据
	const getData = async (index) => {
		// 处理中condition中为null的数据
		const conditionArray = condition.filter(item => item !== null);

		try {
			loadingState.value = 'loading'
			let res = await API.VehicleInfo({
				"pageIndex": index,
				"pageSize": pageSize.value,
				"condition": conditionArray
			})
			console.log("getData res", res.data.list, index);
			if (index == 1) {
				carList.length=0
				Object.assign(carList, res.data.list)
			} else {
				carList.push(...res.data.list)
			}
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = carList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}

	}

	// 搜索
	const search = async (value) => {
		console.log("搜索值", value);
		// 去除空格字符
		let val = value.replace(/\s/g, "")
		if (val == '' || val == null) {
			condition[1] = {
				"filedIndex": "vtype",
				"filedValue": null
			}
		} else {
			carList.length = 0
			condition[1] = {
				"filedIndex": "vtype",
				"filedValue": value
			}
		}
		getData(1)
	}

	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getData(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getData(page.value)
			}, 1000)
		}
	}
	// 修改默认车辆
	const edit = (item) => {
		console.log("edit", item);
		uni.showModal({
			title: '温馨提示',
			content: `确认将车牌号为<${item.carPlate}>的车辆设为默认车辆？`,
			success(res) {
				if (res.confirm) {
					API.setDef(uni.getStorageSync('userInfo').id, item.id).then(res => {
						console.log("修改后状态", res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						getData(1)
					}).catch(err => {
						uni.showToast({
							title: "修改失败，请重新操作！",
							icon: "none"
						})
					})
				}
			}
		})
	}
	// 添加车辆：重新认证
	const toAddCar = () => {
		// uni.navigateTo({
		// 	url: '/pages/users/user_certification/index?index=1'
		// });
		uni.navigateTo({
			url: '/pages/users/user_certification/components/step2?addCar=true'
		});
	}
	// del
	const del = (item, index) => {
		console.log("del", item, index);
		uni.showModal({
			title: '温馨提示',
			content: `确认删除车牌号为<${item.carPlate}>的车辆？`,
			success(res) {
				if (res.confirm) {
					API.deleteVehicles(item.id).then(res => {
						console.log("删除后状态", res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						carList.splice(index, 1)
						getData(1)
					}).catch(err => {
						uni.showToast({
							title: "删除失败，请重新操作！",
							icon: "none"
						})
					})
				}
			}
		})
	}
</script>
<style>
	>>>.u-icon {
		margin-left: 30rpx !important;
	}
	>>>.u-search{
		flex: 3 !important;
		margin-right: 20rpx !important;
	}
	>>>.u-button{
		flex: 1 !important;
		height: 70rpx !important;
	}
</style>
<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.wrap {
		// height: 88vh;
		// overflow: auto;
		padding-bottom: 60rpx;
	}

	.bg {
		background-color: #1da1ff !important;
		color: white;

		.bottom {
			color: #00ffdc !important;
		}
	}

	.icon {
		margin-left: 30rpx;
		display: flex;

	}

	.item {
		border: 1px solid #1da1ff;
		padding: 34rpx 34rpx 24rpx;
		background-color: #fff;
		margin: 20rpx 0;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;

		.center {
			font-size: 30rpx;
			margin-top: 22rpx;
			border-bottom: 1px dashed;
		}

		.top {
			display: flex;
			font-weight: bold;
			font-size: 32rpx;
			justify-content: space-between;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 70rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #ffffff;
					font-size: 24rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 40rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			flex: 1;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		padding: 40rpx 20rpx;
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		// border-radius: 20rpx;
		z-index: 9;
	}
</style>